<template>
  <div>
    <div class="div-content" style="">

    </div>
    <Form ref="searchForm" @keydown.enter.native="Search" :model="searchForm" inline :label-width="60"
      class="search-form">
      <Form-item label="支出钱包" prop="paymentWallet">
        <Select v-model="searchForm.paymentWallet" placeholder="全部钱包" clearable style="width: 160px">
          <Option value="RECHARGE">充值钱包</Option>
          <Option value="PROMOTE_HY">推广钱包余额-会员费</Option>
          <Option value="PROMOTE_FW">推广钱包余额-服务费</Option>
        </Select>
      </Form-item>
      <Form-item label="时间">
        <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable
          @on-change="selectDateChange" placeholder="选择起始时间" style="width: 200px">
        </DatePicker>
      </Form-item>
      <Form-item label="收款人手机号" prop="payeePhone" :label-width="100">
        <Input type="text" v-model="searchForm.payeePhone" placeholder="请输入手机号" clearable style="width: 160px" />
      </Form-item>
      <Form-item label="区域" prop="region">
        <region ref="region" style="width: 350px" @selected="selectedRegionSearch" />
      </Form-item>
      <Form-item label="级别" prop="payeeGradeName">
        <Select v-model="searchForm.payeeGradeName" placeholder="级别" clearable style="width: 160px">
          <Option value="金卡会员">金卡会员</Option>
          <Option value="银卡会员">银卡会员</Option>
          <Option value="普通用户">普通用户</Option>
        </Select>
      </Form-item>
      <Button @click="Search" type="primary" icon="ios-search" class="search-btn">搜索</Button>
      <Button @click="handleReset" type="primary" class="search-btn">重置</Button </Form>
    </Form>
    <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"></Table>
    <Row type="flex" justify="end">
      <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
        @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator
        show-sizer></Page>
    </Row>
  </div>
</template>

<script>
  import {
    PlantTransferList,
    PlantTransferAll
  } from "@/api/financial.js"
  import region from "@/views/lili-components/region-every";
  export default {
    data() {
      return {
        loading: false,
        selectDate: '',
        total: 0,
        searchForm: {
          // 搜索框初始化对象
          memberId: "admin",
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          startTime: "", // 起始时间
          endTime: "", // 终止时间
          paymentWallet: "",
          payeeGradeName: "",
          payeePhone: '',
        },
        columns: [{
            title: '序号',
            type: "index",
            width: '80',
            align: 'center'
          }, {
            title: "订单号",
            key: "sn",
            minWidth: 240,
            tooltip: true,
          }, {
            title: "转账时间",
            key: "createTime",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "转账焕贝额",
            key: "transferMoney",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "支出钱包",
            minWidth: 200,
            tooltip: true,
            render: (h, params) => {
              if (params.row.paymentWallet == "RECHARGE") {
                return h("Span", {}, "充值钱包");
              } else if (params.row.paymentWallet == "PROMOTE_HY") {
                return h("Span", {}, "推广钱包余额-会员费");
              } else if (params.row.paymentWallet == "PROMOTE_FW") {
                return h("Span", {}, "推广钱包余额-服务费");
              }
            },
          },
          {
            title: "收款人手机号",
            key: "payeePhone",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "收款人姓名",
            key: "payeeName",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "收款人区域",
            key: "payeeRegion",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "收款人级别",
            key: "payeeGradeName",
            minWidth: 200,
            tooltip: true,
          },
        ],
        data: []
      }
    },
    created() {
      this.getDataList()
    },
    components: {
      region
    },
    methods: {
      getDataList() {
        PlantTransferList(this.searchForm).then((res) => {
          this.loading = false;
          this.data = res.result.records;
          this.total = res.result.total;
        })
      },
      // 起止时间从新赋值
      selectDateChange(v) {
        if (v) {
          this.searchForm.startTime = v[0];
          this.searchForm.endTime = v[1];
        }
      },
      // 选中的地址
      selectedRegionSearch(val) {
        this.searchForm.region = val[1].join(',');
        this.searchForm.regionId = val[0].join(',');
      },
      Search() {
        this.loading = true
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        this.getDataList();
      },
      handleReset() {
        this.searchForm.pageNumber = 1 // 当前页数
        this.searchForm.pageSize = 10 // 页面大小
        this.searchForm.startTime = "" // 起始时间
        this.searchForm.endTime = "" // 终止时间
        this.searchForm.paymentWallet = ''
        this.selectDate = ''
        this.searchForm.payeePhone = ''
        this.searchForm.payeeGradeName = ''
        this.searchForm.region = ''
        this.searchForm.regionId = ''
        this.$refs.region.addr = [];
        this.getDataList();
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getDataList();
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = v;
        this.getDataList();
      },
    }
  }
</script>

<style lang="scss" scoped>
  .div-content {
    width: 100%;
    height: 100%;
    display: flex;

    .div-item {
      line-height: 35px;
      display: flex;
      float: left;
      margin-right: 36px;
      font-size: 16px;
      font-weight: 600;

      // >.div-item-left {}

      >.div-item-right {
        flex: 1;
        word-break: break-all;
      }
    }
  }
</style>
